<template>
    <!-- <div class="container">
        <h3>我是头部</h3>
         slot是可以放想要的内容进去，默认的会被替代 
        <slot>我是默认内容</slot>
        <h3>我是底部</h3>
    </div> -->


    <!-- 具名插槽；就是给插槽添加名字 -->
    <!-- <div class="container">

        <slot name="header">我是头顶默认内容</slot>
        <h3>我是头部</h3>
        <slot name="body">我是身体默认内容</slot>
        <h3>我是底部</h3>
    </div> -->
    <!-- 作用域插槽 -->
    <div class="container">
        <h3>我是头部</h3>
        <div v-for="(item,index) in list">
            <span>{{ index }}</span>
            <span>---</span>
            <span>{{ item.name }}</span>
            <span>---</span>
            <span>
                <slot name="body" :myIndex="item.age" :myName="item.name ":item="item">我是身体默认内容</slot>
            </span>
        </div>
        <h3>我是底部</h3>
    </div>


</template>
<script setup lang="ts">
let list = [
    {name:'张三',age:19},
    {name:'李四',age:20},   
    {name:'王五',age:21}
]

</script>
<style scoped>
.container {
    background-color: yellowgreen;
    color: white;
}
</style>